<template>
	<div class="main">
		<el-card shadow="never" class="content-card">
			<div slot="header" class="clearfix">
				<el-button type="primary" size="small" @click="dialogFormVisible = true">新增</el-button>
				<el-button type="primary" size="small" @click="lianxi">练习</el-button>
			</div>

			<!-- 新增模态框 -->
			<el-dialog title="地址详情" :visible.sync="dialogFormVisible" width="800px">
				<el-form :model="form" :inline="true" ref="form">
					<el-form-item label="发货地址" prop="addressName">
						<el-input v-model="form.addressName" autocomplete="off" style="width: 300px; height: 30px;">
						</el-input>
					</el-form-item>
					<el-form-item label="发货人姓名" prop="name">
						<el-input v-model="form.name" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
					</el-form-item>
					<el-form-item label="发货人手机号" prop="phone">
						<el-input v-model="form.phone" autocomplete="off" style="width: 300px; height: 30px;">
						</el-input>
					</el-form-item>
					<el-form-item label="邮政编码" prop="postCode">
						<el-input v-model="form.postCode" autocomplete="off" style="width: 300px; height: 30px;">
						</el-input>
					</el-form-item>
					<el-form-item label="收货地址">
						<div id="app">
							<el-cascader size="large" :options="options" v-model="selectedOptions"
								@change="handleChange">
							</el-cascader>
						</div>



					</el-form-item>
					<el-form-item label="详细地址" prop="detailAddress">
						<el-input v-model="form.detailAddress" autocomplete="off" style="width: 300px; height: 30px;">
						</el-input>
					</el-form-item>
					<el-form-item label="是否默认收货地址" prop="detailAddress">
						<el-switch v-model="form.receiveStatus" :active-value="1" :inactive-value="0">
						</el-switch>
					</el-form-item>
					<el-form-item label="是否默认发货地址" prop="detailAddress">
						<el-switch v-model="form.sendStatus" :active-value="1" :inactive-value="0">
						</el-switch>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="NweAddress">确 定</el-button>
				</div>
			</el-dialog>





			<el-table :data="items" border style="width: 100%">
				<el-table-column fixed type="index" align="center" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="addressName" label="地址名称" align="center" width="150">
				</el-table-column>
				<el-table-column label="默认发货地址" align="center" width="150">
					<template slot-scope="scope">

						<el-switch v-model="scope.row.sendStatus" @change="changeShow(scope.row)" :active-value="1"
							:inactive-value="0">
						</el-switch>
					</template>

				</el-table-column>
				<el-table-column prop="name" label="收货人姓名" align="center" width="150">
				</el-table-column>
				<el-table-column prop="phone" label="收货人电话" align="center" width="150">
				</el-table-column>
				<el-table-column label="收货人地址" align="center" width="150">
					<template slot-scope="scope">

						<span>{{scope.row.detailAddress}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="url" label="默认收货地址" align="center" width="150">
					<template slot-scope="scope">

						<el-switch v-model="scope.row.receiveStatus" @change="shouhuo(scope.row)" :active-value="1"
							:inactive-value="0">
						</el-switch>
					</template>

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center" width="150">
				</el-table-column>

				<el-table-column label="操作" width="150" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="alter(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
	import {
		regionDataPlus
	} from 'element-china-area-data'
	import {
		addressList,
		setSendOne,
		setReceiveOne,
		companyAddress,
		save,
		update
	} from "@/api/order/address/index.js"
	export default {
		data() {
			return {
				arrs:[{"key":"颜色","value":"竹影系列"},{"key":"大小","value":"三室一厅"}],
				
				str:{},
				options: regionDataPlus,
				selectedOptions: [],
				dialogFormVisible: false,
				items: [],
				form: {
					addressName: "",
					name: "",
					phone: "",
					postCode: "",
					detailAddress: "",
					// cityCode: "地址编码,英文逗号隔开,比如 400000,400100,400111" ,
					cityCode: "",
					receiveStatus: 0,
					sendStatus: 0
				},
				arr: "",
				 id:"",
				 strs:""
			}
		},
		methods: {
			//练习
			lianxi(){
			var _this =this
			// this.arrs.forEach(ele=>{
			// 	return _this.strs[ele.key] = ele.value;
			// })
			// console.log(this.str)
			this.arrs.map(ele=>{
				return _this.str[ele.key] = ele.value;
			})
				console.log(this.str)
			},
			//编辑
			alter(val){
				this.id = val.id
				console.log(val)
				 this.dialogFormVisible = true
				 this.form =val
			},
			//新增地址确定
			NweAddress(){
				if(this.id){
					update(this.form).then(res=>{
						if(res.success){
							this.$message.success("更新地址成功!")
							this.dialogFormVisible = false
							this.getAddress()
						}
					})
				}else{
					save(this.form).then(res=>{
						console.log(res)
						if(res.success){
							this.$message.success("新增地址成功!")
							this.dialogFormVisible = false
							this.getAddress()
						}
					})
				}
				
			},
			// 城市选择器
			handleChange(value) {
				console.log(value) //["110000", "110100", "110101"]
				// 如何把这个value数组里的三个值赋给上面form对象里的cityCode(字符串类型,中间用英文逗号隔开)
				// this.form.cityCode = value.splice(",")
				this.form.cityCode = value.join(',');
				console.log(this.form.cityCode)
			},
			// 删除
			remove(val) {
				console.log(val)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					companyAddress(val.id).then(res => {

						if (res.success) {
							this.$message.success("删除成功")
							this.getAddress()
						} else {
							this.$message.error("删除失败,请检查网络设置")
						}
					})
				})
			},
			//收货默认
			shouhuo(val) {
				// 添加一个暂存状态
				var temp = val.receiveStatus === 1 ? 0 : 1
				setReceiveOne({
					id: val.id,
					receiveStatus: val.receiveStatus
				}).then(res => {
					if (res.success) {
						this.$message.success("状态修改成功")
					} else {
						val.receiveStatus = temp
						this.$message.error("状态修改失败,请检查接口")
					}

				})
			},
			// 发货默认开关
			changeShow(val) {
				// 添加一个暂存状态
				var temp = val.sendStatus === 1 ? 0 : 1
				setSendOne({
					id: val.id,
					sendStatus: val.sendStatus
				}).then(res => {
					if (res.success) {
						this.$message.success("状态修改成功")
					} else {
						val.sendStatus = temp
						this.$message.error("状态修改失败,请检查接口")
					}

				})
			},
			// 获取地址列表
			getAddress() {
				addressList().then(res => {
					console.log(res)
					this.items = res.data.items
				})
			}
		},
		created() {
			this.getAddress()
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
